import { format } from 'date-fns';
import { useMemo, useState } from 'react';
import { useMediaPredicate } from 'react-media-hook';
import DatetimePicker from 'src/component/DatetimePicker';
import Radio from 'src/component/Radio';
import RadioGroup from 'src/component/RadioGroup';
import { MediaQuery } from 'src/constant/Media';
import {
  calibrateBeginDate,
  calibrateEndDate,
  getStartOfMonth,
  getYesterdayDate,
} from 'src/util/datetimeHelper';
import style from './Interval.module.scss';
import QueryModal from './QueryModal';

type Props = {
  begin: string;
  setBegin: (v: string) => void;
  end: string;
  setEnd: (v: string) => void;
};

const Interval = ({ begin, setBegin, end, setEnd }: Props) => {
  const isBiggerThanXsm = useMediaPredicate(MediaQuery.Xsm);
  const [open, setOpen] = useState<boolean>(false);
  const radioValue = useMemo(() => {
    if (
      begin === calibrateBeginDate(new Date()).toISOString() &&
      end === calibrateEndDate(new Date()).toISOString()
    )
      return 'today';
    if (
      begin === calibrateBeginDate(getYesterdayDate()).toISOString() &&
      end === calibrateEndDate(getYesterdayDate()).toISOString()
    )
      return 'yesterday';
    if (
      begin === calibrateBeginDate(getStartOfMonth()).toISOString() &&
      end === calibrateEndDate(new Date()).toISOString()
    )
      return 'month';

    return 'custom';
  }, [begin, end]);

  const onSubmit = (from: string, to: string) => {
    setBegin(from);
    setEnd(to);
  };

  return (
    <>
      <div className={style.interval}>
        <div className={style.head}>{"查询区间"}</div>
        <RadioGroup
          name="interval"
          className={style.radioGroup}
          onChange={(e) => {
            const value = e.target.value;
            if (value === 'today') {
              setBegin(calibrateBeginDate(new Date()).toISOString());
              setEnd(calibrateEndDate(new Date()).toISOString());
            } else if (value === 'yesterday') {
              setBegin(calibrateBeginDate(getYesterdayDate()).toISOString());
              setEnd(calibrateEndDate(getYesterdayDate()).toISOString());
            } else if (value === 'month') {
              setBegin(calibrateBeginDate(getStartOfMonth()).toISOString());
              setEnd(calibrateEndDate(new Date()).toISOString());
            }
          }}
        >
          <Radio value="today" label="今天" checked={radioValue === 'today'} />
          <Radio
            value="yesterday"
            label="昨天"
            checked={radioValue === 'yesterday'}
          />
          <Radio
            value="month"
            label="本月"
            checked={radioValue === 'month'}
          />
        </RadioGroup>
      </div>
      {isBiggerThanXsm ? (
        <div className={style.timepicker}>
          <div className={style.block}>
            <div className={style.head}>{"从"}</div>
            <DatetimePicker
              value={begin}
              onChange={(e) => {
                if (!e) return;
                if (new Date(e) > new Date(end)) setEnd(e);
                setBegin(e);
              }}
            />
          </div>
          <div className={style.block}>
            <div className={style.head}>{"到"}</div>
            <DatetimePicker
              value={end}
              onChange={(e) => {
                if (!e) return;
                if (new Date(e) < new Date(end)) setBegin(e);
                setEnd(e);
              }}
            />
          </div>
        </div>
      ) : (
        <div className={style.sm} onClick={() => setOpen(true)}>
          <div>{format(new Date(begin), 'yyyy/MM/dd HH:mm')}</div>
          <div>—</div>
          <div>{format(new Date(end), 'yyyy/MM/dd HH:mm')}</div>
        </div>
      )}
      <QueryModal
        open={open}
        onClose={() => setOpen(false)}
        defaultBegin={begin}
        defaultEnd={end}
        onSubmit={onSubmit}
      />
    </>
  );
};

export default Interval;
